<!--
	描述：账户管理
-->
<link rel="stylesheet" type="text/css" href="css/styleuserinfo.css">
<script src="js/self/addressadd.js"></script>
<div class="userinfo" ng-app="userInfoModule">
	<div class="container">
		<div class="col-md-2 tab-title ">
			<h4 class="accounttitle">账号管理</h4>
			<ul class="nav nav-tab vertical-tab" role="tablist" id="vtab">
				<li role="presentation" class="pieceorder  active">
					<a data-target="#aa" aria-controls="aa" role="tab" data-toggle="tab">个人信息</a>
				</li>

				<li role="presentation" class="pieceorder">
					<a data-target="#bb" aria-controls="bb" role="tab" data-toggle="tab">地址薄</a>
				</li>
				<li role="presentation" class="pieceorder">
					<a data-target="#cc" aria-controls="cc" role="tab" data-toggle="tab">账号绑定</a>
				</li>
				<li role="presentation" class="pieceorder">
					<a data-target="#dd" aria-controls="dd" role="tab" data-toggle="tab">我的积分</a>
				</li>
				<li role="presentation" class="pieceorder">
					<a data-target="#ee" aria-controls="ee" role="tab" data-toggle="tab">我的优惠券</a>
				</li>

				<li role="presentation" class="pieceorder">
					<a data-target="#ff" aria-controls="ff" role="tab" data-toggle="tab">打印设置</a>
				</li>
				<li role="presentation" class="pieceorder">
					<a data-target="#gg" aria-controls="gg" role="tab" data-toggle="tab">我的月结卡</a>
				</li>
			</ul>
		</div>
		<!-- Tab panes -->
		<div class="col-md-10 tabcontent">
			<div class="tab-content vertical-tab-content">
				<!--个人信息-->
				<div role="tabpanel" class="tab-pane active" id="aa">
					<div class="areatitle">
						<h4><span class="title">基本资料</span></h4>
					</div>
					<div class="info">
						<div class="col-md-8">
							<table class="table ">
								<tr>
									<td>姓名：</td>
									<td>公司：</td>
								</tr>
								<tr>
									<td>生日：</td>
									<td>部门：</td>
								</tr>
								<tr>
									<td>性别：</td>
									<td>职位：</td>
								</tr>
								<tr>
									<td>座机：</td>
									<td>手机：</td>
								</tr>
								<tr>
									<td>Emial：</td>
									<td>地址：</td>
								</tr>

							</table>
						</div>
						<div class="col-md-4">
							<p>个人头像：<span class="right"><a href="#">编辑</a></span></p>
							<div class="text-center">
								<img src="images/show/photo.png" class="img-responsive" align="我的头像" />
								<p class="text-center">上传头像</p>
								<p class="text-center">您需要上传200x200以上且小于1M的 JPG格式的图片
								</p>
							</div>

						</div>
					</div>

					<div class="areatitle clearfix">
						<h4><span class="title">验证信息</span></h4>
					</div>
					<div class="col-md-8">
						<div class="info">
							<p>手机号码 15210740955<span class="right"><a href="#">修改</a></span></p>
							<p>邮箱地址 您尚未绑定油箱<span class="right"><a href="#">立即绑定</a></span></p>

						</div>
					</div>

					<div class="areatitle clearfix">
						<h4><span class="title">密码设置</span></h4>
					</div>
					<div class="info">
						<p>
							<a href="#">修改密码</a>
						</p>
						<p>登录后修改您的速运账号密码</p>
						<p>
							<a href="#">找回密码</a>
						</p>
						<p>如果您忘记了密码，可以通过密保邮箱找回密码。</p>
					</div>

				</div>

				<!--地址薄-->
				<div role="tabpanel" class="tab-pane" id="bb">
					<!-- 页面tab -->
					<ul class="nav nav-tabs" role="tablist">
						<li role="presentation" class="active">
							<a data-target="#home" role="tab" data-toggle="tab">我的地址</a>
						</li>
						<li role="presentation">
							<a data-target="#profile" role="tab" data-toggle="tab">常用地址</a>
						</li>

					</ul>
					<!-- Tab panes -->
					<div class="tab-content" ng-controller="userInfoCtrl">
						<div class="fixedbtn">
							<div class="col-md-4 btnaddress">
								<button class="btn btn-default">删除</button>
								<button class="btn btn-default">导出</button>
								<button type="button" class="btn btn-default " data-toggle="modal" data-target="#myModal">添加</button>

								<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
									<div class="modal-dialog">
										<div class="modal-content">
											<div class="modal-header">
												<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
												<h4 class="modal-title" id="myModalLabel">添加地址薄</h4>
											</div>
											<div class="modal-body">
												<form class="form-horizontal" role="form">

													<div class="form-group">
														<label class="col-sm-3 control-label"><b>*</b>　姓名：</label>
														<div class="col-sm-8">
															<input name="username" type="text" class="form-control" placeholder="请输入发件人姓名" ng-model="userInfo.username" required="required">
														</div>
													</div>
													<div class="form-group" id="mobile-group">
														<label class="col-sm-3 control-label"><b>*</b> 联系方式：</label>
														<div class="col-sm-8">
															<input name="mobile" type="text" class="form-control" placeholder="请输入联系电话" ng-model="userInfo.mobile" required="required">
														</div>
													</div>
													<div class="form-group" id="sendcompany-group">
														<label class="col-sm-3 control-label"> 寄件公司：</label>
														<div class="col-sm-8">
															<input name="company" type="text" class="form-control" placeholder="请输入寄件公司" ng-model="userInfo.company">
														</div>
													</div>
													<div class="form-group">
														<label class="col-sm-3 control-label"><b>*</b> 省市区：</label>
														<div class="col-sm-8">
															<input name="province" type="text" class="form-control" placeholder="请填写正确的省市区" ng-model="userInfo.province">
														</div>
													</div>
													<div class="form-group">
														<label for="inputPassword" class="col-sm-3 control-label"><b>*</b> 详细地址：</label>
														<div class="col-sm-8">
															<input name="address" type="text" class="form-control" placeholder="街道详细（精确到门牌号） " ng-model="userInfo.address" required="required">
														</div>
													</div>
												</form>
											</div>
											<div class="modal-footer">
												<div class="form-group">
													<div class="col-md-offset-2 col-md-10">
														<button type="button" class="btn btn-default" data-dismiss="modal" ng-click="getFormData()">确定</button>

													</div>
												</div>
											</div>
										</div>
									</div>
								</div>

							</div>

							<!--查询-->
							<div class="col-md-8">
								<form class=" form-inline">
									<div class="form-group">
										<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
										<div class="input-group">

											<input type="text" class="form-control" id="exampleInputAmount" placeholder="姓名/电话/地址">
											<div class="input-group-addon">查询</div>
										</div>
									</div>

								</form>
							</div>
							<div class="clearfix"></div>

						</div>

						<div role="tabpanel" class="tab-pane fade in active" id="home">
							<div class="addresstable">
								<table class="table table-striped table-bordered">
									<thead>
										<th><input type="checkbox" />　姓名</th>
										<th>联系方式</th>
										<th>公司</th>
										<th>地址</td>

											<th class="">操作</th>
									</thead>
									<tbody>
										<tr>
											<td>小王</td>
											<td>13112589764</td>
											<td>北京市传智播客</td>
											<td>中关村软件园</td>
											<td>
												<a href="#">设为默认</a>
											</td>
										</tr>
									</tbody>

								</table>

							</div>

						</div>
						<div role="tabpanel" class="tab-pane fade" id="profile">

							<div class="addresstable">
								<table class="table table-striped">
									<tr>
										<td><input type="checkbox" />　姓名</td>
										<td>联系方式</td>
										<td>公司</td>
										<td>地址</td>

										<td class="">操作</td>
									</tr>
								</table>
								<table class="table table-bordered table-striped" id="expresscontent">

								</table>

							</div>

						</div>

					</div>

				</div>

				<!--账号绑定-->
				<div role="tabpanel" class="tab-pane" id="cc">账号绑定</div>
				<!--我的积分-->
				<div role="tabpanel" class="tab-pane" id="dd">我的积分</div>
				<!--我的优惠券-->
				<div role="tabpanel" class="tab-pane" id="ee">我的优惠券</div>
				<!--打印设置-->
				<div role="tabpanel" class="tab-pane" id="ff">打印设置</div>
				<!--我的月结卡-->
				<div role="tabpanel" class="tab-pane" id="gg">我的月结卡</div>
			</div>
		</div>
	</div>
</div>
